<!DOCTYPE html>
<html>
<head>
  <script src="../../processing.js"></script>
<link rel="stylesheet" href="../style.css"/></head>
<body><h1><a href="http://ejohn.org/blog/processingjs/">Processing.js</a></h1>
<h2>Tickle</h2>

<p>The word "tickle" jitters when the cursor hovers over.
Sometimes, it can be tickled off the screen.</p>

<p><a href="http://processing.org/learning/topics/tickle.html"><b>Original Processing.org Example:</b> Tickle</a><br>
<script type="application/processing">
PFont font;
float x = 33; // X-coordinate of text
float y = 60; // Y-coordinate of text

void setup() 
{
  size(200, 200);
  font = loadFont("AmericanTypewriter-24.vlw");
  textFont(font);
  noStroke();
}

void draw() 
{
  fill(204, 120);
  rect(0, 0, width, height);
  fill(0);
  // If the cursor is over the text, change the position
  if ((mouseX >= x) && (mouseX <= x+55) &&
    (mouseY >= y-24) && (mouseY <= y)) {
    x += random(-5, 5);
    y += random(-5, 5);
  }
  text("tickle", x, y);
}
</script><canvas width="200" height="200"></canvas></p>
<div style="height:0px;width:0px;overflow:hidden;"></div>

<pre><b>// All Examples Written by <a href="http://reas.com/">Casey Reas</a> and <a href="http://benfry.com/">Ben Fry</a>
// unless otherwise stated.</b>
PFont font;
float x = 33; // X-coordinate of text
float y = 60; // Y-coordinate of text

void setup() 
{
  size(200, 200);
  font = loadFont("AmericanTypewriter-24.vlw");
  textFont(font);
  noStroke();
}

void draw() 
{
  fill(204, 120);
  rect(0, 0, width, height);
  fill(0);
  // If the cursor is over the text, change the position
  if ((mouseX &gt;= x) && (mouseX &lt;= x+55) &&
    (mouseY &gt;= y-24) && (mouseY &lt;= y)) {
    x += random(-5, 5);
    y += random(-5, 5);
  }
  text("tickle", x, y);
}</pre>
</body>
</html>
